<template>
  <div>
    <h1>事件修饰符</h1>
    <!--事件冒泡：子级事件可以冒泡给父级节点-->
    <div @click="fatherClick2">
      父亲2
      <div @click="fatherClick1">
        父亲1
        <div @click="subClick1">儿子1</div>
        <div @click="subClick2">儿子2</div>
      </div>
    </div>
    <hr />
    <!--阻止事件冒泡：子级事件不想让父级响应-->
    <div @click="fatherClick">
      父亲
      <div @click="subClick1">儿子1</div>
      <!--阻止事件冒泡修饰符:stop-->
      <div @click.stop="subClick2">儿子2</div>
      <!--鼠标右键的默认事件:right,并没有阻止右键默认菜单事件-->
      <div @click.right="rightClick">右键点击默认事件</div>
      <!--prevent鼠标右键的默认事件:right-->
      <div @click.right.prevent="rightClick">阻止右键点击默认事件</div>
    </div>
    <hr />
    <!--只有点击子级的时候才出发该事件,点击儿子不会出发该事件-->
    <div @click.self="fatherClick">
      父亲
      <div @click="subClick1">儿子</div>
    </div>
    <hr />
    <!--键盘事件-->
    <div>
      <div>
        <!--ctrl键被按下-->
        请按ctrl键：
        <input type="text" @keydown.ctrl="onCtrlEvent" />
        <input type="text" @click.ctrl="onCtrlEvent2" />
      </div>
      <div>
        回车键提交：
        <input type="text" @keydown.enter="onSubmit" />
      </div>
      <!--阻止默认删除事件-->
      <div>
        删除事件：
        <input type="text" @keydown.delete="OnDelete" />
        阻止默认删除：
        <input type="text" @keydown.delete.prevent="OnDelete" />
        阻止输入空格：
        <input type="text" @keydown.space.prevent="onSpace" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "demon6",
  methods: {
    fatherClick() {
      console.log("父级事件");
    },
    fatherClick1() {
      console.log("父级1事件");
    },
    fatherClick2() {
      console.log("父级2事件");
    },
    subClick1() {
      console.log("子级1事件");
    },
    subClick2() {
      console.log("子级2事件");
    },
    rightClick() {
      console.log("右键点击事件");
    },
    onCtrlEvent() {
      console.log("ctrl键被按下");
    },
    onCtrlEvent2() {
      console.log("ctrl键被按下后点击鼠标左键");
    },
    onSubmit() {
      console.log("回车提交事件");
    },
    OnDelete() {
      console.log("删除事件");
    },
    OnDelete2() {
      console.log("删除事件,阻止默认删除内容");
    },
    onSpace() {
      console.log("阻止空格输入事件");
    }
  }
};
</script>

<style lang="stylus" scoped></style>
